<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" >  <!-- thymeleaf追加 -->
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 后台管理员</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!-- vue追加 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>		<!-- vue的AJAX追加 -->
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">  <!-- layui格式使用 -->
  <!-- 自用js函数始 -->
     
  <!-- 自用js函数末 -->
</head>
<body>
	<!-- 工作区域始 --> <!-- 药物管理界面 -->
<div class="layui-fluid">
   <div class="layui-row layui-col-space15">
     <div class="layui-col-md12">
       <div class="layui-card">
        
        
        <!-- 展示 -->
		  <div id="app"> <!-- vue -->
        
          <div class="layui-card-header">请输入查询药物名字</div>
          <div class="layui-card-body layui-row layui-col-space10">
          
            <div class="layui-col-md6">
              <input  v-model="medicine"  type="text" name="title" placeholder="请输入标准药名" autocomplete="off" class="layui-input">
            </div>
            
 			<div class="layui-btn-container">
              <input type="button" value="查询"  @click="getMedicine"  class="layui-btn layui-btn-primary">
            </div>         

	  
		  <div class="layui-card-header">药物展示</div>
          <div class="layui-card-body">
               
        <table border="1" class="layui-table">
        	<tr>
        		<td>药品编号&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药品名字&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药品规格&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药品详情&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药品生产商&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药品售价&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药品成本&nbsp&nbsp&nbsp&nbsp</td>
        		<td>添加&nbsp&nbsp&nbsp&nbsp</td>
        		<td>状态&nbsp&nbsp&nbsp&nbsp</td>
        		
        	</tr>
        	<tr v-for="medi in list">
        		<td>{{medi.mediId}}</td>
        		<td>{{medi.mediName}}</td>
        		<td>{{medi.mediStand}}</td>
        		<td>{{medi.mediSpecification}}</td>
        		<td>{{medi.mediManu}}</td>
        		<td>{{medi.mediPrice}}</td>
        		<td>{{medi.mediCost}}</td>
        		<td><a :href="'http://localhost:8080/addCart?mediId='+medi.mediId">选入</a></td>
        		<td><a :href="'http://localhost:8080/deleteMedicineCost?id='+medi.mediId">删除</a></td>
        		
       		
        	</tr>         
        </table>  
  
          </div>
           </div>  
           
                     
          </div> <!-- /vue -->
          <!-- /展示 -->
              
        
         </div>
       </div>
      </div>
     </div>
<!-- 工作区域末 -->
<!-- vue -->
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                medicine: "",
                list:[]
            },
            methods:{
               
               getMedicine:function(){ 
                    //ajax for axios
                    var that=this;
                    axios.get("http://localhost:8080/findMedicineCost?mediname="+this.medicine)
                    .then(function(d){
                        that.list=d.data.data
                    });
               }
            }
        });
    
    
    </script>
<!-- vue -->
 <script src="../../../layuiadmin/layui/layui.js"></script>  <!-- layui基础script -->
 <script>
 layui.config({
	    base: '../../../layuiadmin/' //静态资源所在路径
	  }).extend({
	    index: 'lib/index' //主入口模块
	  }).use(['index', 'table'], function(){
	    var table = layui.table;
	  

	  
	  });
</script>  <!-- leyui基础function -->
</body>
</html>